<script setup lang="ts">
import { getLatestQuestions } from '@/api/subject';
import type { Question } from '@/api/subject/type';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const questions = ref<Question[]>([]);
const route = useRoute();
const router = useRouter();

const toAnswer = (id: string) => {
    router.push({
        name: 'QuestionAnswer',
        query: {
            id: id,
            subjectId: route.query.id
        }
    });
}

onMounted(() => {
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        getLatestQuestions(id).then((res) => {
            questions.value = res.data;
        })
    }
})
</script>

<template>
    <div class="container">
        <van-list class="list">
            <van-cell v-for="question in questions" :key="question.id" @click="toAnswer(question.id)" clickable class="item">
                <template #title>
                    <div class="title">
                        <van-tag type="primary" style="margin-right: 8px;">{{ question.type }}</van-tag>
                        <span>{{ question.title }}</span>
                    </div>
                </template>
                <template #label>
                    <div class="time">创建时间：{{ question.created }}</div>
                </template>
            </van-cell>
        </van-list>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 94%;
    margin: 3%;
    .list {
        .item {
            border-radius: 15px;
            margin-top: 3%;
        }
    }
    .title {
        display: flex;
        align-items: center;
    }
    .time {
        color: #999;
        font-size: 12px;
        margin-top: 4px;
    }
}
</style>